<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<br/>
<h1>个人信息</h1>
<br/><br/>
<div class="with:80%">
    <table>
        <thead>
        <tr>
            <th>名字</th>
            <th>头像</th>
            <th>个性签名</th>
            <th>账户余额</th>
        </tr>
        </thead>
        <tbody>
        <!--each来进行for循环求值-->
        <tr th:each="person:${person}">
            <th scope="row" th:text="${person.name}"></th>
            <td><img src="" width="100px" id="you">
                <div>
                    <input type="file" name="" id="" onchange="tobin(this)" value="">
                </div>
                <div style="position: absolute;z-index: -1;width: 0px;height: 0px;overflow: hidden;">
                    <canvas id="can" width="320px" height="240px"></canvas>
                </div>
            </td>
            <td th:text="${person.myword}"></td>
            <td th:text="${person.balance}"></td>
        </tr>

        </tbody>
    </table>
    <p><a th:href="@{/person/toUpdate}">修改个人信息</a></p>
</div>
</body>
<script type="text/javascript">
    function tobin(target) {
        //获取临时缓存图片的路径，并传递给“显示图片”
        var url = window.URL.createObjectURL(target.files.item(0));

        //制造一张图片，传入画布，让它在画布中画出来。
        var img1 = new Image();
        img1.src = url;

        //初始化捕捉元素
        var can = document.getElementById('can');
        var you = document.getElementById('you');
        var context = can.getContext("2d");

        //当图片制造完成后，执行函数
        img1.onload = function () {
            //因为canvas输出的二进制图片会根据当前canvas的大小而变形，所以要将图片原始尺寸取出，然后传递给canvas,这样就能保证输出的图片原始比例不变
            var nw = img1.naturalWidth;
            var nh = img1.naturalHeight;
            can.setAttribute('width', nw + 'px')
            can.setAttribute('height', nh + 'px')
            //图片原始比例
            console.log(nw, nh);
            //绘制进canvas
            context.drawImage(img1, 0, 0, nw, nh);

            //二进制流转化函数
            var bin = can.toDataURL("image/jpeg"); //bin值已经存放了二进制流


            //二进制流传入“显示图片”
            console.log(bin);
            you.src = bin;
        }
    }
</script>
</html>